<template>
    <div class="navig">

        <div class="button" @click="clickmatch()">返回赛事</div>
        <div class="match">
            <div class="item">
                <div style="display: flex;align-items: center;">
                    <img src="@/assets/home/football.png" style="width: 16px;height: 16px"
                        v-if="detailstate.matchdetail.match.sport_type == 'soccer'" alt="">
                    <img src="@/assets/home/basketball.png" style="width: 16px;height: 16px" v-else alt="">
                    <div style="margin-left: 4px">{{ detailstate.matchdetail.match.sport_type == 'soccer' ? '足球' : '篮球'
                        }}
                    </div>
                </div>
                <div>{{ detailstate.matchdetail.match.league_name }}</div>
            </div>
            <div style="font-size: 16px;font-weight: bold;color: #000;">{{ detailstate.matchdetail.match.home_name }} vs
                {{ detailstate.matchdetail.match.away_name }}</div>
            <div class="item2">
                <div style="margin-right: 8px">{{ detailstate.matchdetail.match.match_time }}</div>
                <el-select v-model="state.userId" placeholder="分组" style="width: 200px" @change="store.onChangeUser">
                    <el-option v-for="item in state.users" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>

        </div>
    </div>
</template>

<script setup>
const { detailstore, detailstate } = inject('detailSell')
const { store, state } = inject('Sell')
const { platformObj } = inject('/board')
const clickmatch = () => {
    state.matchdetail.show = false
    detailstate.matchdetail.show = false
    window.electron.deleteshortcut()
    store.getMatchList(false)
}
</script>

<style lang="scss" scoped>
.navig {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ebebeb;
    // background-color: #fafafa;

    .button {
        width: auto;
        padding: 4px 12px;
        background-color: #ff7900;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
    }

    .match {
        flex: 1;
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .item {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            color: #666;
            font-weight: bold;
            font-size: 14px;
        }
        .item2 {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            font-weight: bold;
            font-size: 14px;
        }
    }
}
</style>